<template>
  <el-table :data="tableData">
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="lname" label="产品名称" />
    <el-table-column prop="repayTime" label="还款日期" />
    <el-table-column prop="rateNumber" label="贷款利率" />
    <el-table-column prop="loanTime" label="贷款期限" />
    <el-table-column>
      <template v-slot="scope">
        <el-button type="primary" @click="state.applyLoan(scope.row)">
          立即申请
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogVisible" title="还款">
    <span>
      <el-form :model="loanVo">
        <el-form-item
          label="姓名"
          prop="realName"
          :rules="[
            { required: true, message: '请输入真实姓名', trigger: 'blur' },
            {
              pattern: /^[\u4e00-\u9fa5]+$/,
              message: '请输入中文',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="loanVo.realName"
            placeholder="请输入姓名"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="iden">
          <el-input
            v-model="loanVo.iden"
            :blur="state.cardNumIsRightOrNot"
            placeholder="输入身份证信息"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="贷款金额"
          prop="money"
          :rules="[
            { required: true, message: '金额不能为空', trigger: 'blur' },
          ]"
        >
          <el-input
            v-model="loanVo.money"
            placeholder="最高可贷10万"
            :blur="state.calThePayRice"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="贷款收款卡号">
          <el-input
            v-model="loanVo.cardNum"
            type="text"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="通信地址">
          <el-input
            v-model="loanVo.address"
            type="text"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="loanVo.mobile"
            type="text"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="验证码"
          prop="code"
          :rules="[
            { required: true, message: '请输入验证码', trigger: 'blur' },
          ]"
        >
          <el-input
            v-model="loanVo.code"
            placeholder="请输入验证码"
            style="width: 300px"
          ></el-input>
          <el-button
            :disabled="disCount != 0"
            type="primary"
            @click="refreshSendCode()"
          >
            {{ textName }}
          </el-button>
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="state.submitTheLoanMsg">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { GetLoanApply, GetLoanProduct } from '@/api/loan'
import { ElMessage } from 'element-plus'
import { RefreshTheCreditCode } from '@/api/creditCard'
const textName = ref('发送验证码')
const disCount = ref(0)
const count = ref(0)
const tableData = ref([])
const dialogVisible = ref(false)
const loanVo = ref({
  realName: '',
  cardNum: '',
  mobile: '',
  address: '',
  iden: '',
  money: '',
  code: '',
})
function refreshSendCode() {
  if (loanVo.value.mobile === undefined || loanVo.value.mobile === '') {
    ElMessage.error('请输入手机号')
  } else {
    count.value++
    RefreshTheCreditCode().then(({ code, message }) => {
      let n = 60
      textName.value = n + '秒钟重新获取'
      if (code === 200) {
        ElMessage.success(message)
      } else {
        ElMessage.error('发送失败请稍后重试！')
      }
      const timer = setInterval(() => {
        if (n === 0) {
          disCount.value = 0
          clearInterval(timer)
          textName.value = '获取验证码'
        } else {
          disCount.value = 1
          n--
          textName.value = n + '秒钟重新获取'
        }
      }, 1000)
    })
  }
}
const state = {
  getTableDate: async () => {
    const { data } = await GetLoanProduct()
    console.log(data)
    tableData.value = data
    console.log(tableData.value)
  },
  applyLoan: async () => {
    loanVo.value = {}
    dialogVisible.value = true
  },
  submitTheLoanMsg: async () => {
    console.log(loanVo.value)
    const { data, code, message } = await GetLoanApply(loanVo.value)
    if (code === 200) {
      ElMessage.success(message)
      dialogVisible.value = false
    } else {
      ElMessage.error(data)
    }
  },
}

onMounted(() => {
  state.getTableDate()
})
</script>

<style scoped></style>
